<template>
	<div :class="'bg-white p-2'">
		<Row class="p-1">
			<Col class="p-1" span="4" :xs="24" :sm="12" :md="8" :lg="8" :xl="8" :xxl="8">
			<Input class="w-100" clearable v-model="clientName" placeholder="请输入客户名"
				:onkeyup="clientName = clientName.replace(/\s+/g,'')" />
			</Col>
			<Col class="p-1" span="4" :xs="24" :sm="12" :md="8" :lg="8" :xl="8" :xxl="8">
			<Select class="w-100" v-model="storeId" clearable filterable placeholder="请选择门店">
				<Option v-for="(store, index) in stores" :value="store.storeId" :key="index">{{ store.name }}</Option>
			</Select>
			</Col>
			<Col class="p-1" span="4" :xs="24" :sm="12" :md="8" :lg="8" :xl="8" :xxl="8">
			<Select class="w-100" v-model="type" clearable placeholder="请选择押金类型">
				<Option v-for="stype in soucuntype" :value="stype.value" :key="stype.value">{{ stype.label }}</Option>
			</Select>
			</Col>

			<Col :xs="24" class="p-1">
			<Button class="float-right" type="primary" shape="circle" @click="searchs" icon="ios-search">查询</Button>
			</Col>


		</Row>
		<div class="mt-1 d-xl-none">
			<Row class="bg-white border-top border-dark">
				<Col v-for="(row, index) in tableInfo.data" :xs="24" :sm="12" :md="8" :lg="8" :xl="8" :xxl="8"
					class="p-1 mt-2">
				<div class="shadow p-3 radius text-xs text-secondary">
					<div class="p-1 d-flex justify-content-between">
						<span>押金记录编号</span>
						<span>{{row.depositId}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between " style="white-space: nowrap;">
						<span>支付平台支付编号</span>
						<span>{{row.originalCode}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>客户名</span>
						<span>{{row.clientName}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>门店</span>
						<span>{{row.name}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>交易金额</span>
						<span>{{row.amount}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>押金类型</span>
						<span v-if="row.type=='INS'">押金充值</span>
						<span v-else>押金退还</span>
					</div>
					<div class="p-1 d-flex justify-content-end text-sm">
						<Button type="primary" @click="show(row.depositId)" ghost>详细</Button>
					</div>
				</div>
				</Col>
			</Row>
			
		</div>
		<div class="mt-1 d-none d-xl-block">
			<Table border class="m-1" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="type">
					<span v-if="row.type=='INS'">押金充值</span>
					<span v-else>押金退还</span>
				</template>
				<template slot-scope="{ row, index }" slot="amount">
					<span class="text-danger">￥{{util.parseMoney(row.amount / 100, 2)}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<Button type="primary" size="small" style="margin-right: 5px;"
						@click="show(row.depositId)">详细</Button>
				</template>
			</Table>
		</div>
		<div>
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				soucuntype: [{
						value: 'INS',
						label: '押金充值'
					},
					{
						value: 'OUT',
						label: '押金退还'
					}
				],
				stores: [],
				originalCode: "",
				clientName: "",
				storeId: "",
				type: "",
				tableInfo: {
					currentPage: 1,
					total: 0,
					pageSize: 10,
					columnInfo: [{
							title: "押金记录编号",
							key: "depositId",
							width: 150
						},
						{
							title: "支付平台支付编号",
							key: "originalCode",
							width: 200
						},
						{
							title: "客户名",
							key: "clientName",
							width: 100
						},
						{
							title: "门店",
							key: "name",
							width: 150
						},
						{
							title: "交易金额",
							slot: "amount",
							width: 150
						},
						{
							title: "押金类型",
							slot: 'type',
							width: 100
						},
						{
							title: "操作",
							slot: 'action'
						}
					],
					data: [],
				}
			}
		},
		methods: {
			init: function() {
				this.tableInfo.currentPage = 1;
				this.search();
			},
			show: function(depositId) {
				this.$router.push({
					name: "depositRecord_detail",
					params: {
						depositId
					}
				});
			},
			searchs: function() {
				this.tableInfo.currentPage = 1;
				this.search();
			},

			search: function() {
				this.http.get({
					url: "/client/deposit-record/list",
					param: {
						currentPage: this.tableInfo.currentPage,
						size: this.tableInfo.pageSize,
						clientName: this.clientName,
						storeId: this.storeId,
						type: this.type
					}
				}).then(data => {
					this.tableInfo.currentPage = data.current;
					this.tableInfo.total = data.total;
					this.tableInfo.pageSize = data.size;
					this.tableInfo.data = data.records;
				});
			},
			store: function() {
				return this.http.get({
					url: "/store/store/info",
					param: {}
				}).then(data => {
					this.stores = data;
				});
			},
			pageSearch: function(changedPage) {
				this.tableInfo.currentPage = changedPage;
				this.search();
			}
		},
		created: function() {
			this.store().then(() => {
				this.init();
			})
		},
	}
</script>

<style>

</style>